<script>
export default {
  name: 'Card',
  props: {
    row: {
      type: String,
      default: 'row'
    },
    showBtns: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    resetHandle() {
      this.$emit('reset')
    },
    confirmHandle() {
      this.$emit('confirm')
    }
  },
  render(h) {
    if (!this.$scopedSlots.default) return
    const children = this.$scopedSlots.default()
    const vnodes = []
    for (const c of children) {
      if (c.data && c.data.attrs && this.row in c.data.attrs) {
        c.data.staticClass = c.data.staticClass ? c.data.staticClass + ' row' : 'row'
        vnodes.push(c)
      } else if (c.tag !== undefined) {
        vnodes.push(h('div', { class: 'content-item' }, [c]))
      }
    }
    const btnNode = h('div', { class: 'btn-container' }, [
      h('van-button', { class: 'cus-default', props: { round: true }, on: { click: this.resetHandle }}, '重置'),
      h('van-button', { class: 'cus-primary', props: { round: true, type: 'primary' }, on: { click: this.confirmHandle }}, '确定')
    ])
    return h('div', { class: 'filter-card' }, [
      h('div', { class: 'card-content' }, vnodes),
      this.showBtns ? btnNode : ''
    ])
  }
}
</script>
<style lang="less" scoped>
.filter-card{
  padding: 0px 15px 0px 15px;
  // overflow: hidden;
  .card-content{
    // display: flex;
    // justify-content: flex-start;
    // padding-bottom: 20px;
    margin: 0 -5px;
    .content-item{
      // flex: 0 0 25%;
      box-sizing: border-box;
      padding: 0 5px;
      display: inline-block;
      width: 25%;
      margin-top: 15px;
      text-align: center;
      border-radius: 2px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }
    .row{
      margin: 20px 0 -5px 0;
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
    }
  }
  .btn-container{
    display: flex;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    width: 100vw;
    left: 0;
    bottom: 0;
    margin-left: -15px;
    padding: 20px 15px;
    box-sizing: border-box;
    background-color: #fff;
    &>*{
      flex: 1 1 50%;
    }
    &>button:not(:last-child){
      margin-right: 10px;
    }
  }
}
</style>
